<template>
  <div class="geng-common-confirm" :style="newStyle">
    <el-dialog
      center
      class="geng-el-dialog"
      :width="width + 'px'"
      :visible.sync="isShow"
      :show-close="showClose"
    >
      <div slot="title" style="display: flex; align-items: center;">
        <span style="margin-right: 4px;">{{ title }}</span>
        <slot name="icon"></slot>
      </div>

      <div v-if="!!warningTips.length" class="warning-line">
        <img style="margin: 0 4px -4px 0;" :src="require('@/assets/svg/组750.svg')" alt="">
        {{ warningTips || '' }}
      </div>

      <div v-if="!!successTips.length" class="success-line">
        <img style="margin: 0 4px -4px 0;" :src="require('@/assets/svg/组1472.svg')" alt="">
        {{ successTips || '' }}
      </div>

      <slot></slot>

      <span class="dialog-footer" slot="footer">
        <el-button
          v-if="!!otherBtnContent.length"
          size="mini"
          type="danger"
          @click="handleBtnOthersClick"
        >{{ otherBtnContent }}
        </el-button>
        <el-button
          v-if="!!confirmBtnContent.length"
          size="mini"
          :type="confirmBtnType"
          @click="handleBtnConfirmClick"
        >{{ confirmBtnContent }}
        </el-button>
        <el-button
          v-if="!!cancelBtnContent.length"
          size="mini"
          plain
          type="primary"
          @click="handleBtnCancelClick"
        >{{ cancelBtnContent }}
        </el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "gengElCommonConfirm",

  props: {
    bgColor: {
      type: String,
      default: '#001922'
    },
    headerBgColor: {
      type: String,
      default: '#2187A8'
    },
    title: {
      type: String,
      default: ''
    },
    titleTailIcon: {
      type: String,
      default: ''
    },
    width: {
      type: [Number, String],
      default: 520
    },
    warningTips: {
      type: String,
      default: ''
    },
    successTips: {
      type: String,
      default: ''
    },
    confirmBtnContent: {
      type: String,
      default: '确 认'
    },
    confirmBtnType: {
      type: String,
      default: 'primary'
    },
    cancelBtnContent: {
      type: String,
      default: '取 消'
    },
    otherBtnContent: {
      type: String,
      default: ''
    },
    showClose: {
      type: Boolean,
      default: true
    }
  },

  computed: {
    newStyle() {
      return {
        '--background-color': this.bgColor,
        '--header-background-color': this.headerBgColor
      }
    }
  },

  data() {
    return {
      isShow: false
    }
  },

  methods: {
    handleBtnOthersClick() {
      this.$emit('other-confirm')
      // this.$emit('update:isShow', false)
      this.isShow = false
    },

    handleBtnConfirmClick() {
      this.$emit('confirm')
      // this.$emit('update:isShow', false)
      // this.isShow = false
    },

    handleBtnCancelClick() {
      this.$emit('cancel')
      // this.$emit('update:isShow', false)
      this.isShow = false
    }
  }
}
</script>

<style scoped lang="scss">
// 对话框
.geng-el-dialog::v-deep {
  // 背景颜色
  $bg-color: var(--background-color);
  $header-bg-color: var(--header-background-color);

  .el-dialog {
    background: $bg-color;
    border: 1px solid #2187A8;
    border-radius: 4px;
    user-select: none;
    //width: 520px;

    .el-dialog__header {
      height: 38px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background: $header-bg-color;
      padding: 0 0 0 20px;
      border-bottom: 1px solid #2187A8;

      // 标题
      span {
        font-size: 16px;
      }

      // 关闭按钮
      button {
        top: initial;

        i {
          font-size: 20px !important;
        }
      }

      // 字体 颜色 和 大小
      span, button > i {
        color: #FFFFFF;
        font-size: 16px;
      }
    }

    .el-dialog__body {
      color: #FFFFFF;
      font-size: 14px;
      font-weight: bold;
      padding-bottom: 0;

      .el-form-item__label {
        color: #FFFFFF;
      }

      // 下拉框
      .el-select {
        .el-input {
          height: 34px;
          background: transparent;
          color: #FFFFFF;
          user-select: none;

          input {
            background: transparent;
            color: #FFFFFF;
            border: 1px solid #2187A8;
          }

          .el-input__suffix {
            i {
              color: #FFFFFF;
            }
          }
        }
      }
    }

    .el-dialog__footer {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;

      .el-button {
        font-size: 14px;
        border-radius: 4px;
        color: #FFFFFF;
        width: 100px;
        height: 34px;

        &.is-plain {
          background-color: transparent;
        }
      }

      .el-button--primary {
        background: #2187A8;
        border: solid 1px #2187a8;
      }
    }
  }
}
</style>
